<template>
  <div class="app-container">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="请输入课程名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getDataList()">查询</el-button>
          <el-button icon="el-icon-refresh-left" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>

    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading">
        <el-table-column prop="courseName" header-align="center" align="center" label="课程名称"> </el-table-column>
        <el-table-column prop="title" header-align="center" align="center" label="考试名称"> </el-table-column>
        <el-table-column prop="fullScore" header-align="center" align="center" label="满分"> </el-table-column>
        <el-table-column prop="startTime" header-align="center" align="center" label="开始时间"> </el-table-column>
        <el-table-column prop="endTime" header-align="center" align="center" label="结束时间"> </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-plus" @click="itemHandle(scope.row)">开始考试 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { fetchList, delObj, countObj } from '@/api/teacher/exam'

export default {
  data() {
    return {
      dataForm: {
        name: ''
      },
      searchForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      itemVisible: false
    }
  },
  components: {},

  created() {
    this.getDataList()
  },
  methods: {
    resetForm() {
      this.dataForm.title = ''
      this.dataForm.title = ''
      this.dataForm.courseName = ''
      // this.$refs['dataForm'].resetFields()
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize
          },
          this.dataForm
        )
      ).then(response => {
        this.dataList = response.data.records
        this.totalPage = response.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    itemHandle(row) {
      const date = new Date().getTime()
      const start = new Date(row.startTime).getTime()
      const end = new Date(row.endTime).getTime()
      console.log(date - start)
      console.log(date - end)
      if (date < start) {
        this.$message.warning('未到考试开始时间！')
        return
      }
      if (date > end) {
        this.$message.warning('考试已结束！')
        return
      }
      // 校验学生是否参加过考试
      countObj({ courseId: row.id }).then(response => {
        if (response.data > 0) {
          this.$message.warning('你已经参加过该考试！')
        } else {
          this.$router.push({ name: 'examOnLine', params: { id: row.id } })
        }
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          return delObj(id)
        })
        .then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        })
    }
  }
}
</script>
